<template>
	<view class="good_detail">
		<scroll-view scroll-y class="viewport">
			<!-- 基本信息 -->
			<view class="goods">
				<!-- 商品主图 -->
				<view class="preview">
					<swiper style="width: 100%; height: 100%;" circular @change="onChangeBanners">
						<swiper-item v-for="(item, index) in goodDetails.mainPictures" :key="index">
							<image @tap="onTapImage(item)" style="width: 100%; height: 100%;" mode="aspectFill"
								:src="item" />
						</swiper-item>
					</swiper>
					<view class="indicator" v-if="goodDetails.mainPictures">
						<text class="current">{{bannerCurrIndex + 1}}</text>
						<text class="split">/</text>
						<text class="total">{{goodDetails.mainPictures.length}}</text>
					</view>
				</view>

				<!-- 商品简介 -->
				<view class="meta">
					<view class="price">
						<text class="symbol">¥</text>
						<text class="number">{{goodDetails.price}}</text>
					</view>
					<view class="name ellipsis">{{goodDetails.name}}</view>
					<view class="desc">{{goodDetails.desc}}</view>
				</view>

				<!-- 操作面板 -->
				<view class="action">
					<view class="item arrow" @click="onShowSku(1)">
						<text class="label">选择</text>
						<text class="text ellipsis"> {{selectArrText || '请选择商品规格'}} </text>
					</view>
					<view class="item arrow" @tap="openPopop('addressPane')">
						<text class="label">送至</text>
						<text class="text ellipsis"> 请选择收获地址 </text>
					</view>
					<view class="item arrow" @tap="openPopop('servicePanel')">
						<text class="label">服务</text>
						<text class="text ellipsis"> 无忧退 快速退款 免费包邮 </text>
					</view>
				</view>
			</view>

			<!-- 商品详情 -->
			<view class="detail panel">
				<view class="title">
					<text>详情</text>
				</view>
				<view class="content" v-if="goodDetails.details">
					<view class="properties">
						<!-- 属性详情 -->
						<view class="item" v-for="(item, index) in goodDetails.details.properties" :key="item.name">
							<text class="label">{{item.name}}</text>
							<text class="value">{{item.value}}</text>
						</view>
					</view>
					<!-- 图片详情 -->
					<image v-for="(item, index) in goodDetails.details.pictures" :key="index"
						style="width: 100%; display:block;" mode="widthFix" :src="item">
					</image>
				</view>
			</view>

			<!-- 同类推荐 -->
			<view class="similar panel">
				<view class="title">
					<text>同类推荐</text>
				</view>
				<view class="content">
					<navigator v-for="(item, index) in goodDetails.similarProducts" :key="item.id" class="goods"
						hover-class="none" :url="`/pages/goods/goods?id=${item.id}`">
						<image class="image" mode="aspectFill" :src="item.picture"></image>
						<view class="name ellipsis">{{item.name}}</view>
						<view class="price">
							<text class="symbol">¥</text>
							<text class="number">{{item.price}}</text>
						</view>
					</navigator>
				</view>
			</view>
		</scroll-view>

		<!-- 用户操作 -->
		<view class="toolbar" :style="{ paddingBottom: safeAreaInsets.bottom + 'px' }">
			<view class="icons">
				<button class="icons-button"><text class="icon-heart"></text>收藏</button>
				<button class="icons-button" open-type="contact">
					<text class="icon-handset"></text>客服
				</button>
				<view class="icons-button" @tap="toCart" open-type="switchTab">
					<text class="icon-cart"></text>购物车
				</view>
			</view>
			<view class="buttons">
				<view class="addcart" @click="onShowSku(2)"> 加入购物车 </view>
				<view class="buynow" @click="onShowSku(3)"> 立即购买 </view>
			</view>
		</view>

		<!-- uni-ui 弹出层 -->
		<uni-popup ref="popup" background-color="#fff" type="bottom">
			<!-- 底部弹出 Popup -->
			<AddressPane v-if="popupType === 'addressPane'" @closePopup="closePopup"></AddressPane>
			<ServicePanel v-if="popupType === 'servicePanel'" @closePopup="closePopup"></ServicePanel>
		</uni-popup>

		<!-- SKU -->
		<vk-data-goods-sku-popup v-model="skuShow" :localdata="skuGoods" :mode="mode" @close="onClose"
			@add-cart="onAddCart" @buy-now="onBuyNow" add-cart-background-color="#FFA868"
			buy-now-background-color="#27BA9B" ref="skuPopupRef" :actived-style="{
				color: '#27BA9B',
				borderColor: '#27BA9B',
				backgroundColor: '#E9F8F5',
			}" />
	</view>
</template>

<script>
	import {
		getGoodDetail
	} from "@/services/goodDetail.js"
	import {
		addMemberCart
	} from '@/services/card.js'
	import AddressPane from './components/AddressPanel.vue'
	import ServicePanel from './components/ServicePanel.vue'
	export default {
		components: {
			AddressPane,
			ServicePanel
		},
		data() {
			return {
				//获取手机安全区域数据
				safeAreaInsets: {},
				// 详情页所有信息
				goodDetails: {},
				// 轮播图页数
				bannerCurrIndex: 0,
				// 弹出层类型：addressPane(收货地址)||servicePanel(服务说明)
				popupType: '',
				mode: 1,
				skuShow: false,
				skuGoods: {},
				selectArrText: '',
			}
		},
		onLoad(option) {
			// 获取屏幕边界到安全区域距离
			const {
				safeAreaInsets
			} = uni.getSystemInfoSync()
			this.safeAreaInsets = safeAreaInsets
			this.getGoodDetailData(option.id)
		},
		methods: {
			// 去购物车
			toCart() {
				// 跳转到tabbar页并刷新页面
				uni.switchTab({
					url: '/pages/cart/cart',
					success: (res) => {
						let page = getCurrentPages().pop();
						if (page == undefined || page == null) return;
						page.onLoad();
					}
				})
			},
			// 关闭sku
			onClose() {
				this.selectArrText = this.$refs.skuPopupRef.selectArr.join(" ");
			},
			// 立即购买
			onBuyNow(ev) {
				uni.navigateTo({
					url: `/pagesOrder/create/create?skuId=${ev._id}&count=${ev.buy_num}`
				})
			},
			// 加入购物车
			async onAddCart(ev) {
				addMemberCart({
					skuId: ev._id,
					count: ev.buy_num
				})
				this.selectArrText = this.$refs.skuPopupRef.selectArr.join(" ");
				uni.showToast({
					icon: 'success',
					title: '添加成功'
				})
				this.skuShow = false
			},
			// 控制是否显示sku
			onShowSku(mode) {
				this.mode = mode;
				this.skuShow = true;
			},
			getGoodDetailData(id) {
				getGoodDetail(id).then(res => {
					this.goodDetails = res.result
					this.skuGoods = {
						_id: res.result.id,
						name: res.result.name,
						goods_thumb: res.result.mainPictures[0],
						spec_list: res.result.specs.map((v) => ({
							name: v.name,
							list: v.values
						})),
						sku_list: res.result.skus?.map((item) => {
							return {
								_id: item.id,
								goods_id: res.result.id,
								goods_name: res.result.name,
								image: item.picture,
								price: item.price,
								stock: item.inventory,
								sku_name_arr: item.specs?.map((xxx) => xxx.valueName),
							};
						})
					}
				})
			},
			// 切换轮播图
			onChangeBanners(event) {
				this.bannerCurrIndex = event.detail.current
			},
			// 轮播图放大预览
			onTapImage(url) {
				uni.previewImage({
					current: this.bannerCurrIndex,
					url,
					urls: this.goodDetails.mainPictures,
					loop: true,
				})
			},
			// 收货地址和服务说明,弹出层
			openPopop(param) {
				this.popupType = param
				this.$refs.popup.open("bottom")
			},
			// 关闭弹出层
			closePopup() {
				this.$refs.popup.close()
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.good_detail {
		height: 100%;
		width: 100%;

		.viewport {
			height: 100%;
			background-color: #f4f4f4;
		}

		.panel {
			margin-top: 20rpx;
			background-color: #fff;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 90rpx;
				line-height: 1;
				padding: 30rpx 60rpx 30rpx 6rpx;
				position: relative;

				text {
					padding-left: 10rpx;
					font-size: 28rpx;
					color: #333;
					font-weight: 600;
					border-left: 4rpx solid #27ba9b;
				}

				navigator {
					font-size: 24rpx;
					color: #666;
				}
			}
		}

		.arrow {
			&::after {
				position: absolute;
				top: 50%;
				right: 30rpx;
				content: '\e6c2';
				color: #ccc;
				font-family: 'erabbit' !important;
				font-size: 32rpx;
				transform: translateY(-50%);
			}
		}

		/* 商品信息 */
		.goods {
			background-color: #fff;

			.preview {
				height: 750rpx;
				position: relative;

				.image {
					width: 100%;
					height: 100%;
				}

				.indicator {
					height: 40rpx;
					padding: 0 24rpx;
					line-height: 40rpx;
					border-radius: 30rpx;
					color: #fff;
					font-family: Arial, Helvetica, sans-serif;
					background-color: rgba(0, 0, 0, 0.3);
					position: absolute;
					bottom: 30rpx;
					right: 30rpx;

					.current {
						font-size: 26rpx;
					}

					.split {
						font-size: 24rpx;
						margin: 0 1rpx 0 2rpx;
					}

					.total {
						font-size: 24rpx;
					}
				}
			}

			.meta {
				position: relative;
				border-bottom: 1rpx solid #eaeaea;

				.price {
					height: 130rpx;
					padding: 25rpx 30rpx 0;
					color: #fff;
					font-size: 34rpx;
					box-sizing: border-box;
					background-color: #35c8a9;
				}

				.number {
					font-size: 56rpx;
				}

				.brand {
					width: 160rpx;
					height: 80rpx;
					overflow: hidden;
					position: absolute;
					top: 26rpx;
					right: 30rpx;
				}

				.name {
					max-height: 88rpx;
					line-height: 1.4;
					margin: 20rpx;
					font-size: 32rpx;
					color: #333;
				}

				.desc {
					line-height: 1;
					padding: 0 20rpx 30rpx;
					font-size: 24rpx;
					color: #cf4444;
				}
			}

			.action {
				padding-left: 20rpx;

				.item {
					height: 90rpx;
					padding-right: 60rpx;
					border-bottom: 1rpx solid #eaeaea;
					font-size: 26rpx;
					color: #333;
					position: relative;
					display: flex;
					align-items: center;

					&:last-child {
						border-bottom: 0 none;
					}
				}

				.label {
					width: 60rpx;
					color: #898b94;
					margin: 0 16rpx 0 10rpx;
				}

				.text {
					flex: 1;
					-webkit-line-clamp: 1;
				}
			}
		}

		/* 商品详情 */
		.detail {
			padding-left: 20rpx;

			.content {
				margin-left: -20rpx;

				.image {
					width: 100%;
				}
			}

			.properties {
				padding: 0 20rpx;
				margin-bottom: 30rpx;

				.item {
					display: flex;
					line-height: 2;
					padding: 10rpx;
					font-size: 26rpx;
					color: #333;
					border-bottom: 1rpx dashed #ccc;
				}

				.label {
					width: 200rpx;
				}

				.value {
					flex: 1;
				}
			}
		}

		/* 同类推荐 */
		.similar {
			.content {
				padding: 0 20rpx 200rpx;
				background-color: #f4f4f4;
				display: flex;
				flex-wrap: wrap;

				.goods {
					width: 302rpx;
					padding: 24rpx 20rpx 20rpx;
					margin: 20rpx 7rpx;
					border-radius: 10rpx;
					background-color: #fff;
				}

				.image {
					width: 300rpx;
					height: 260rpx;
				}

				.name {
					height: 80rpx;
					margin: 10rpx 0;
					font-size: 26rpx;
					color: #262626;
				}

				.price {
					line-height: 1;
					font-size: 20rpx;
					color: #cf4444;
				}

				.number {
					font-size: 26rpx;
					margin-left: 2rpx;
				}
			}

			navigator {
				&:nth-child(even) {
					margin-right: 0;
				}
			}
		}

		/* 底部工具栏 */
		.toolbar {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
			background-color: #fff;
			height: 100rpx;
			padding: 0 20rpx var(--window-bottom);
			border-top: 1rpx solid #eaeaea;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: content-box;

			.buttons {
				display: flex;

				&>view {
					width: 220rpx;
					text-align: center;
					line-height: 72rpx;
					font-size: 26rpx;
					color: #fff;
					border-radius: 72rpx;
				}

				.addcart {
					background-color: #ffa868;
				}

				.buynow,
				.payment {
					background-color: #27ba9b;
					margin-left: 20rpx;
				}
			}

			.icons {
				padding-right: 10rpx;
				display: flex;
				align-items: center;
				flex: 1;

				.icons-button {
					flex: 1;
					text-align: center;
					line-height: 1.4;
					padding: 0;
					margin: 0;
					border-radius: 0;
					font-size: 20rpx;
					color: #333;
					background-color: #fff;

					&::after {
						border: none;
					}
				}

				text {
					display: block;
					font-size: 34rpx;
				}
			}
		}
	}
</style>